CSS transformations allow you to modify the appearance and position of elements using two main types: 2D and 3D transformations. The key difference is that 2D transformations operate on the X and Y axes, while 3D transformations introduce an additional Z axis, allowing elements to appear closer or farther away from the viewer.

Key Differences

1
2D Transformations — Work on a flat plane using the X and Y axes (e.g., translateX, translateY, rotate, scale).
2
3D Transformations — Extend transformations into the Z axis, creating depth and perspective (e.g., translateZ, rotateX, rotateY, rotateZ).

Example: 2D Transformation

In this example, the element rotates and scales on a 2D plane—there’s no perception of depth.

Example: 3D Transformation

Here, the element rotates around the Y-axis and moves closer along the Z-axis, giving it a realistic 3D depth effect when combined with perspective.

Common 2D Transform Functions

1
translate(x, y) — Moves the element along X and Y axes.
2
rotate(angle) — Rotates the element in 2D space.
3
scale(x, y) — Resizes the element on X and Y axes.
4
skew(x-angle, y-angle) — Tilts the element along X or Y axes.

Common 3D Transform Functions

1
translateZ(z) — Moves the element closer or farther away along the Z axis.
2
rotateX(angle) — Rotates around the horizontal X-axis.
3
rotateY(angle) — Rotates around the vertical Y-axis.
4
rotateZ(angle) — Rotates within the 3D space (like a 2D rotation but within perspective).

Best Practices

1
Use 2D transformations for simple animations or layout adjustments.
2
Use 3D transformations to create perspective and depth effects (e.g., card flips or rotating cubes).
3
Add a perspective property on the parent element for realistic 3D effects.
4
Always include transform-style: preserve-3d on elements that contain nested 3D-transformed children.

Difficulty: 5/10

Topics: transform functions, perspective, performance

Scenario Questions

0-2 years experience

1
If you need to rotate a button 45 degrees and move it 20px to the right, which CSS transform would you write, and is that a 2D or 3D transform?
2
You want a card to flip on hover. Would you use a 2D or 3D transform, and why?

2-5 years experience

1
We added transform: rotateY(45deg); to a modal, but on some browsers the modal disappears. What could be causing that, and how would you fix it?
2
Our landing page uses transform: scale(1.2) on hover, and we later added perspective: 800px on the parent. The scaling now looks odd—explain why the interaction between 2D and 3D transforms matters here.

5-8 years experience

1
Our UI library offers a Transform component that abstracts CSS transforms. We need to support both 2D and 3D animations while keeping GPU usage optimal. How would you design the component to decide when to emit a 2D versus a 3D transform?
2
A dashboard renders dozens of animated charts, some using translateX and others using rotate3d. Discuss the performance implications of mixing 2D and 3D transforms at this scale and how you would profile and improve them.

8+ years experience

1
The product is migrating from a legacy codebase that relies heavily on 2D transforms to a new design system that introduces depth with 3D transforms site‑wide. Propose a migration strategy that minimizes regressions, ensures cross‑browser consistency, and manages the impact on the rendering pipeline.
2
A cross‑team animation framework must support both 2D and 3D transforms, be themeable, and run on low‑end devices. How would you architect this framework, decide on fallback paths, and set guidelines for when to prefer 2D over 3D?

Follow-up Questions

❓How does the browser compose multiple transform functions together?
❓What impact does using a 3D transform have on GPU usage compared to a 2D transform?
❓How would you verify that a transform behaves consistently across major browsers?